<%-- 
    Document   : uploadCorporateCustomer
    Created on : Dec 30, 2013, 12:40:00 PM
    Author     : santosh
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <%@include file="../common/script.jsp" %>
        <%@include file="../common/title.jsp" %>
        <script type="text/javascript">
            var rules=new Array();
            rules[0]='multipartFile|custom|check()';
            function check(){
                var parts = document.getElementById("multipartFile").value.split(".");
                if (parts[parts.length-1] != "csv") {
                    return "Please Select Only .csv File";
                } else{
                    return null;
                }
            }
            
            //            function getEventList(){
            //                
            //                var corporateId=document.getElementById("paymentTypeId").value;
            //                $.ajax({
            //                    url:"../ajaxCallForEventListByCorporateId.htm",
            //                    dataType:"json",
            //                    data: ({'corporateId':corporateId}),
            //                    success:function(json){
            //                        //                        alert(json[0].eventDescription);
            //                        $('#eventTable').remove();
            //                        //                        var innerHtml="<table id='eventTable' class='data_table' border='1px'><thead><tr class='header'><td align='center'>Event ID</td><td align='center'>Event Description</td></tr></thead><c:forEach items='${json}' var='Item'><tr><td align='center'>${Item.eventId}</td><td align='center'>${Item.eventDescription}</td></tr></c:forEach></table>";
            //                        var innerHtml="<table id='eventTable' class='data_table' border='1px'><thead><tr class='header'><td align='center'>Event ID</td><td align='center'>Event Description</td><td>&nbsp;</td></tr></thead>";
            //                        for(var idx in json){
            //                            innerHtml+="<tr><td align='center'>";
            //                            innerHtml+=json[idx].eventId;
            //                            innerHtml+="</td><td align='center'>";
            //                            innerHtml+="<input type='text' id='eventDescription' name='eventDescription' value=";
            //                            innerHtml+=json[idx].eventDescription;
            //                            innerHtml+=" class='userInputLarge'/>";
            //                            innerHtml+="</td>";
            //                            innerHtml+="<td align='center'><a href='#' onclick='editEvent(";
            //                            innerHtml+=json[idx].eventId;
            //                            innerHtml+=",";
            //                            innerHtml+=$('#eventDescription').val();
            //                            innerHtml+=",";
            //                            innerHtml+=json[idx].corporate.paymentTypeId;
            //                            innerHtml+=");'>Edit</a></td>";
            //                            innerHtml+="</tr>";
            //                        }
            //                        innerHtml+="</table>";
            //                        document.getElementById("eventDiv").innerHTML=innerHtml;
            //                    },
            //                    error:function(e){
            //                        alert('Error: Event data does not saved');
            //                    }
            //                });
            //
            //            }
                        
            function editEvent(id,name,cid){
                $.ajax({
                    url:"../ajaxCallForEventEdit.htm",
                    dataType:"json",
                    data: ({'eventId':id,
                        'eventDescription':name,
                        'corporateId':cid}),
                    success:function(json){
                        if(json)
                            alert('Event updated successfully');
                    },
                    error:function(e){
                        alert('Error: Event data does not saved');
                    }
                });
            }
        </script>
    </head>
    <body onload="yav.init('form1', rules,'inline');">
        <%@include file="../common/header.jsp" %>
        <%@include file="../common/menu.jsp" %>
        <div style="float: left">
            <form:form modelAttribute="fileUpload" method="post" id="form1" name="form1" action="../corporate/uploadCorporateCustomer.htm" cssClass="userInputForm" enctype="multipart/form-data">
                <spring:hasBindErrors name="fileUpload">
                    <div class="error">
                        <form:errors path="*"/>
                    </div>
                </spring:hasBindErrors>
                <div class="in_02">
                    <fieldset style="width: 550px; height: auto;">
                        <legend>Upload Corporate Customer Database</legend>
                        <table>
                            <tr>
                                <td style="padding-left: 10px;">Select File*:
                                    <input type="file" id="multipartFile" name="multipartFile" style="width:100%;"/><br/>
                                    <span id="errorsDiv_multipartFile"></span><br/><br/>
                                    <b>.csv file format with the following fields</b><br/><br/>
                                    <ul style="margin:0 0 20px 20px;">
                                        <li><b>Column A - Employee Code</b> (Cannot blank)</li>
                                        <li><b>Column B - Customer Name</b> (can be blank)</li>
                                        <li><b>Column C - Office Location</b> (can be blank)</li>
                                        <li><b>Column D - Department</b> (can be blank)</li>
                                        <li><b>Column E - Designation</b> (can be blank)</li>
                                        <li><b>Column F - Phone</b> (10digit phones separated by "/" ,can be blank)</li>
                                        <li><b>Column G - Email Id</b> (can be blank)</li>
                                        <li><b>Column H - Category A</b> (can be blank)</li>
                                        <li><b>Column I - Category B</b> (can be blank)</li>
                                        <li><b>Column J - Category C</b> (can be blank)</li>
                                        <li><b>Column K - Corporate Id</b> (cannot blank)</li>

                                        <li><b>Column L - Event1 Id</b> (Can not blank)</li>
                                        <li><b>Column M - Event1 date</b> (Must be in the format "dd/mm/yyyy" ,can be blank)</li>
                                        <li><b>Column N - Event1 status</b> (can be blank)</li>

                                        <li><b>Column O - Event2 Id</b> (Can not blank)</li>
                                        <li><b>Column P - Event2 date</b> (Must be in the format "dd/mm/yyyy" ,can be blank)</li>
                                        <li><b>Column Q - Event2 status</b> (can be blank)</li>

                                        <li><b>:</b></li>
                                        <li><b>:</b></li>

                                        <li><b>Column BB - Event15 Id</b> (Can not blank)</li>
                                        <li><b>Column BC - Event15 date</b> (Must be in the format "dd/mm/yyyy" ,can be blank)</li>
                                        <li><b>Column BD - Event15 status</b> (can be blank)</li>

                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="button" name="cancel" value="cancel" class="validate" onclick="location.href='../home/index.htm'"></td>
                                <td><input class="userInputFormSubmit" type="submit" name="Submit" value="submit" onclick="return yav.performCheck('form1',rules,'inline');"/></td>
                            </tr>
                        </table>
                    </fieldset>
                </div>
            </form:form>
        </div>
        <div style="float: left;">
            <form id="form2" name="form2" method="post" action="../corporate/getEventList.htm">
                <div class="in_02">
                    <fieldset style="width:96.5%;">
                        <legend>Select Corporate</legend>
                        <table>
                            <tr>
                                <td>
                                    Corporate:<br/><select id="paymentTypeId" name="paymentTypeId" class="userInputLarge">
                                        <option value="">-</option>
                                        <c:forEach items="${paymentTypeList}" var="item">
                                            <option <c:if test="${corporateId==item.paymentTypeId}">selected</c:if> value="${item.paymentTypeId}">
                                                ${item.paymentTypeName}
                                            </option>
                                        </c:forEach>
                                    </select><br/><span id="errorsDiv_paymentTypeId"></span>
                                </td>
                                <td style="padding-left: 20px; padding-top: 18px;">
                                    <!--                                    <input type="button" id="Go" name="Go" value="Go" onclick="getEventList();" class="userInputFormSubmit"/>-->
                                    <input type="submit" id="Go" name="Go" value="Go" class="userInputFormSubmit"/>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                    <div id="eventDiv">
                        <table id="eventTable" class="data_table" style="width:100%; margin:0 10px; padding:0; border: 1px solid;float: left;">
                            <thead>
                                <tr class="header">
                                    <td align="center">Event ID</td>
                                    <td align="center">Event Description</td>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[0].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription0" name="eventDescription0" value="${eventList[0].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[0].eventId},document.getElementById('eventDescription0').value,${eventList[0].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[1].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription1" name="eventDescription1" value="${eventList[1].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[1].eventId},document.getElementById('eventDescription1').value,${eventList[1].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[2].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription2" name="eventDescription2" value="${eventList[2].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[2].eventId},document.getElementById('eventDescription2').value,${eventList[2].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[3].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription3" name="eventDescription3" value="${eventList[3].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[3].eventId},document.getElementById('eventDescription3').value,${eventList[3].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[4].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription4" name="eventDescription4" value="${eventList[4].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[4].eventId},document.getElementById('eventDescription4').value,${eventList[4].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[5].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription5" name="eventDescription5" value="${eventList[5].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[5].eventId},document.getElementById('eventDescription5').value,${eventList[5].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[6].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription6" name="eventDescription6" value="${eventList[6].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[6].eventId},document.getElementById('eventDescription6').value,${eventList[6].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[7].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription7" name="eventDescription7" value="${eventList[7].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[7].eventId},document.getElementById('eventDescription7').value,${eventList[7].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[8].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription8" name="eventDescription8" value="${eventList[8].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[8].eventId},document.getElementById('eventDescription8').value,${eventList[8].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[9].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription9" name="eventDescription9" value="${eventList[9].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[9].eventId},document.getElementById('eventDescription9').value,${eventList[9].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[10].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription10" name="eventDescription10" value="${eventList[10].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[10].eventId},document.getElementById('eventDescription10').value,${eventList[10].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[11].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription11" name="eventDescription11" value="${eventList[11].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[11].eventId},document.getElementById('eventDescription11').value,${eventList[11].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[12].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription12" name="eventDescription12" value="${eventList[12].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[12].eventId},document.getElementById('eventDescription12').value,${eventList[12].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[13].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription13" name="eventDescription13" value="${eventList[13].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[13].eventId},document.getElementById('eventDescription13').value,${eventList[13].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                                <tr>
                                    <td align="center">${eventList[14].eventId}</td>
                                    <td align="center"><input type="text" id="eventDescription14" name="eventDescription14" value="${eventList[14].eventDescription}" class="userInputLarge"/></td>
                                    <td align="center"><a href="#" onclick="editEvent(${eventList[14].eventId},document.getElementById('eventDescription14').value,${eventList[14].corporate.paymentTypeId});">Edit</a></td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>
